<template>
  <custom-layout :isTabBar="false" navTitle="菜单列表">
    <view class="user_index">
      <view class="main-container">
        <view class="header-container">
          <uni-search-bar
            v-model="searchValue"
            placeholder="请输入菜单名称"
            clearButton="auto"
            cancelButton="none"
            @confirm="onSearch"
            @clear="onSearchClear"
          />
        </view>

        <uni-swipe-action class="tree-container">
          <custom-tree
            :items="items"
            :fieldsName="fieldsName"
            :customRender="true"
            @onItemClick="(v) => $tab.push(`details?id=${v.key}`)"
          >
            <template v-slot="{ slotData, indent }">
              <uni-swipe-action-item class="action-container">
                <view class="action-content">
                  <view class="action-text_indent" v-for="i in indent" :key="i"></view>
                  <view class="action-text">{{ slotData.menuName }}</view>
                </view>
                <template v-slot:right>
                  <view class="action-button-container">
                    <view
                      class="action-button"
                      style="background-color: #007aff"
                      @click.stop="$tab.push(`add?parentId=${slotData.key}`)"
                    >
                      添加
                    </view>
                    <view
                      class="action-button"
                      style="background-color: #67c23a"
                      @click.stop="$tab.push(`details?id=${slotData.key}`)"
                    >
                      查看
                    </view>
                    <view
                      class="action-button"
                      style="background-color: #e6a23c"
                      @click.stop="$tab.push(`update?id=${slotData.key}`)"
                    >
                      修改
                    </view>
                    <view class="action-button" style="background-color: #dd524d" @click.stop="onDelete(slotData)">
                      删除
                    </view>
                  </view>
                </template>
              </uni-swipe-action-item>
            </template>
          </custom-tree>
        </uni-swipe-action>
      </view>

      <view class="operate-container">
        <button class="link-botton" type="primary" plain="true" @click="$tab.push('add')">添加</button>
      </view>
    </view>
  </custom-layout>
</template>

<script>
import { getTreeMenuList, deleteMenu } from "@/api/system/menu";

export default {
  data() {
    return {
      items: [],
      fieldsName: {
        key: "key",
        label: "menuName",
        children: "children",
      },
      searchValue: "",
    };
  },
  onShow() {
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      const options = {};
      if (this.searchValue) {
        options.menuName = this.searchValue;
      }
      const res = await getTreeMenuList(options);
      this.items = res;
    },
    onDelete(item) {
      this.$message.deleteModal("是否确定永久性删除该记录？", async () => {
        await deleteMenu(`${item.key}`);
        this.initData();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.user_index {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .main-container {
    width: 100%;
    height: calc(100% - 52px);
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .operate-container {
    width: 100%;
    height: 52px;
    background-color: #fff;
    padding: 4px 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    z-index: 1;
    position: relative;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);

    .link-botton {
      width: fit-content;
      margin: 0px;
      line-height: normal;
      font-size: 14px;
      border-radius: 0px;
      border-width: 0px;
      padding: 4px 12px;
    }
  }
}

.action-container {
  width: 100%;

  .action-content {
    display: flex;
    align-items: center;

    padding: 12px 16px;
    box-sizing: border-box;

    .action-text_indent {
      width: 16px;
      height: 16px;
    }

    .action-text {
      font-size: 14px;
    }
  }

  .action-button-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;

    .action-button {
      height: 100%;
      font-size: 14px;
      padding: 0px 20px;
      color: #fff;
      display: flex;
      align-items: center;
    }
  }
}
</style>
